<!-- src/components/TabBar.vue -->
<template>
  <div class="tab-bar">
    <router-link
      v-for="(item, index) in tabList"
      :key="index"
      :to="item.path"
      custom
      v-slot="{ navigate, href, isActive }"
    >
      <div
        :href="href"
        @click="navigate"
        class="tab-item"
        :class="{ active: isActive }"
      >
        <Icon :name="item.icon" />
        <span>{{ item.text }}</span>
      </div>
    </router-link>
  </div>
</template>

<script>
import Icon from '@/components/common/Icon/index.vue'; // 引入前面封装的 Icon 组件

export default {
  name: 'TabBar',
  components: { Icon },
  data() {
    return {
      tabList: [
        { path: '/home', icon: 'home', text: '首页' },
        { path: '/classification', icon: 'fenlei1', text: '分类' },
        { path: '/cart', icon: 'gouwuche', text: '购物车' },
        { path: '/my', icon: 'wodedangxuan', text: '我的' },
      ],
    };
  },
};
</script>

<style scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
}
/* 平分 4份 */
.tab-item {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  color: #666;
  justify-content: center;
}
.tab-item.active {
  color: #ff6140;
  background-color: #fff;
}

.tab-item .iconfont {
  font-size: 20px;
  margin-bottom: 2px;
}
</style>
